<template>
	<view class="container">
		<NavBar title="设备列表"/>
		<view>
			<uv-drop-down 
				ref="dropDown"
				sign="dropDown_1" 
				text-size="24rpx"
				text-active-size="24rpx"
				text-active-color="#3c9cff"
				:extra-icon="{name:'arrow-down-fill',color:'#666',size:'26rpx'}" 
				
				:defaultValue="defaultValue" 
				:custom-style="{padding: '0 30rpx'}" 
				@click="selectMenu"
			>
				<uv-drop-down-item name="projectOrder" type="2" :label="dropItem('projectOrder').label"
				    :value="dropItem('projectOrder').value">
				</uv-drop-down-item>
				<uv-drop-down-item name="supplierOrder" type="2" :label="dropItem('supplierOrder').label"
				    :value="dropItem('supplierOrder').value">
				</uv-drop-down-item>
				<uv-drop-down-item name="categoryOrder" type="2" :label="dropItem('categoryOrder').label"
				    :value="dropItem('categoryOrder').value">
				</uv-drop-down-item>
				<uv-drop-down-item v-if="!isCheer" name="storeStatus" type="2" :label="dropItem('storeStatus').label"
				    :value="dropItem('storeStatus').value">
				</uv-drop-down-item>
			</uv-drop-down>
			<uv-drop-down-popup 
				sign="dropDown_1" 
				:click-overlay-on-close="true"
				:currentDropItem="currentDropItem" 
				@clickItem="clickItem"
				@popupChange="change"
			></uv-drop-down-popup>
		</view>
		<!-- <view class="popup">
			<view class="item" @click="handleOutClick('project')">
				<view class="popup-text">
					{{projectLabel||项目}}
				</view>
				<uv-icon name="arrow-down-fill"></uv-icon>
			</view>
			<view class="item" @click="handleOutClick('cooperation')">
				<view class="">
					合同
				</view>
				<uv-icon name="arrow-down-fill"></uv-icon>
			</view>
			<view class="item" @click="handleOutClick('category')">
				<view class="">
					设备类别
				</view>
				<uv-icon name="arrow-down-fill"></uv-icon>
			</view>
			<view class="item" @click="handleOutClick('state')">
				<view class="">
					状态
				</view>
				<uv-icon name="arrow-down-fill"></uv-icon>
			</view>
			
		</view> -->

		<scroll-view refresher-enabled="true" @refresherrefresh="refresherrefresh" :refresher-triggered='refresh' @scrolltolower="scrolltolower" scroll-y class="list">
			<view class="blank-box"></view>
			<uv-empty mode="data" text="暂无数据" v-if="equipmentList.length==0 && isempty" ></uv-empty>
			<view class="equipment-item" v-for="(item, index) in equipmentList" :key="item.id" @click="goToDetail(item)">
			  <!-- <view class="status-tag" :class="item.status==1?'out':'in'">
			    {{ item.status==1?'已领用':'未领用' }}
			  </view> -->
			  <view class="item-header">
				  <view class="status-tag" :class="item.status==1?'out':'in'">
				    {{ item.status==1?'已领用':'未领用' }}
				  </view>
			    <view class="left-section">
			      <text class="equipment-title">{{ item.name }}</text>
			      <text class="equipment-id">{{ item.code }}</text>
			    </view>
			<!--    <view class="status-tag" :class="item.status==1?'out':'in'">
			      {{ item.status==1?'已领用':'未领用' }}
			    </view> -->
			  </view>
			  
			  <!-- <image class="equipment-image" src="/static/sb_image1.png" mode="widthFix"></image> -->
			  
			  <view class="info-section">
			    <!-- 位置信息 -->
			    <view class="info-row">
			      <!-- <uv-icon name="map-fill"></uv-icon> -->
			      <text class="info-text">供应商：</text>
			      <text class="info-content">{{item.supplierName}}</text>
			    </view>
			    
			    <!-- 时间信息 -->
			    <view class="info-row">
			      <!-- <uv-icon name="clock"></uv-icon> -->
			      <text class="info-text">单价：</text>
				  <text class="info-content">{{item.unitPrice}}</text>
			    </view>
			    
			    <!-- 司机信息 -->
			    <view class="info-row">
			      <!-- <uv-icon name="account"></uv-icon> -->
			      <text class="info-text">台班单位：</text>
				  <text class="info-content">{{item.unit}}</text>
			    </view>
			  </view>
			  
			  <!-- 操作按钮 -->
			  <view class="action-buttons" v-if="!isCheer">
				  <view class="action-btn fuel-btn draw" @click.stop="refuelfacilitydraw(item)">领用记录</view>
			    <view class="action-btn fuel-btn" v-if="item.status==1"  @click.stop="refuel(item)">加油</view>
			    <view @click.stop="redirect(item)" class="action-btn metering fuel-btn" v-show="item.status==1" :class="item.status.type === 'out' ? 'in-btn' : 'out-btn'">
			      计量
			    </view>
				<view class="action-btn fuel-btn" v-show="item.status==1" @click.stop="sendback(item)">
					退还
				</view>
				<view class="action-btn fuel-btn" v-show="item.status==2" @click.stop="outClick(item)">
					领用
				</view>
			  </view>
			</view>
		</scroll-view>
	</view>
	<view v-if="isShow" class="picker-container">
	  <view class="picker-mask" @click="closeOutPicker()"></view>
	  <view class="picker-content">
	    <view class="picker-header">
	      <text class="picker-cancel" @click="closeOutPicker()">取消</text>
	      <text class="picker-title">选择使用单位</text>
	      <text class="picker-confirm" @click="confirmOut()">确定</text>
	    </view>
	    <scroll-view scroll-y class="picker-list">
	      <view  class="picker-item" v-for="(item, index) in unitList" v-show="item.parentId!==0" :key="index" 
	            :class="{ 'selected': unit === item.id }"
	            @click="selectOutOption(item)">
	        <text>{{ item.contractName }}</text>
	      </view>
		  <view class="black-box">
		  	
		  </view>
	    </scroll-view>
		
	  </view>
	</view>
	<uv-overlay :show="show" @click="cancel">
		<view class="warp">
			<view class="rect" @tap.stop>
				<view class="rect-box">
					<view class="box-title">
						领用单位
					</view>
					<view class="box-content " :class="{'select-text':contractName}" @click="receiveUlit">
						{{contractName||'请选择'}}
					</view>
				</view>
				<view class="img-box">
					<view class="title">
						附件
					</view>
					<view class="img-list">
						<view class="imgfile-box" >
							<view class="imgfile wrap__preview" v-show="imgFile.length!==0" v-for="(item,index) in imgFile" :key="index">
								<image  class="imgfile" :src="item" mode="scaleToFill"></image>
								<view class="deletable" @click="deletePic(index)">
									<uv-icon name="close" size="10px" color="#fff"></uv-icon>
								</view>
							</view>
							
							<view v-show="imgFile.length<5" class="plus-icon" @click="chooseImage">
								<uv-icon name="plus"></uv-icon>
							</view>
						</view>
						
					</view>
				</view>
				<view class="rect_but">
					<view class="cancel but" @click="cancel">
						取消
					</view>
					<view class="confirm but" @click="confirm">
						确定
					</view>
					
				</view>
			</view>
		</view>
	</uv-overlay>
</template>

<script>
	import NavBar from '@/components/NavBar/index.vue'
	import {
	    getmaterialSingle,
	    getProjectList,
	    getsupplier,
		queryByParam,
		getqueryByParam,
		getSbmanageList,
		facilitydraw,
		facilitydrawth
	} from '@/utils/app.js'
	import { BASEURL } from '@/utils/request.js'
	export default {
		components:{NavBar},
		onPageScroll() {
			// 滚动后及时更新位置
			this.$refs.dropDown.init();
		},
		computed: {
			dropItem(name) {
				return (name) => {
					const result = {};
					const find = this.result.find(item => item.name === name);
					if (find) {
						result.label = find.label;
						result.value = find.value;
					} else {
						result.label = this[name].label;
						result.value = this[name].value;
					}
					return result;
				}
			},
			// 获取当前下拉筛选项
			currentDropItem() {
				return this[this.activeName];
			}
		},
		data() {
			return {
				isempty:false,
				refresh:false,
				isCheer:false,
				show:false,
				parms:{},
				unit:'',
				isShow:false,
				facilityId:'',
				contractId:'',
				projectId:"",
				unitList:[],
				// 表示value等于这些值，就属于默认值
				defaultValue: [0, 'all', '0'],
				// 筛选结果
				result: [],
				arrParms:{},
				// { name: 'order', label: '最新发布', value: 'new' }
				activeName: 'projectOrder',
				projectOrder: {
				    label: '项目',
				    value: 'all',
				    activeIndex: 0,
				    color: '#333',
				    activeColor: '#2878ff',
				    child: [{
				        label: '综合排序',
				        value: 'all'
				    }]
				},
				supplierOrder: {
				    label: '合同',
				    value: 'all',
				    activeIndex: 0,
				    color: '#333',
				    activeColor: '#2878ff',
				    child: []
				},
				categoryOrder: {
				    label: '设备类别',
				    value: 'all',
				    activeIndex: -1,
				    color: '#333',
				    activeColor: '#2878ff',
				    child: []
				},
				dataList:{},
				storeStatus: {
				    label: '状态',
				    value: 'all',
				    activeIndex: -1,
				    color: '#333',
				    activeColor: '#2878ff',
				    child: [
						{
							label: '全选',
							value:null
						},
						{
						label: '已领用',
						value:1
					},
					{
						label: '未领用',
						value:2
					},
					
				    ]
				},
				
				// stateList:[
				// 	{
				// 		label: '全部',
				// 		value:0
				// 	},
				// 	{
				// 		label: '已出场',
				// 		value:1
				// 	},
				// 	{
				// 		label: '未出场',
				// 		value:2
				// 	},
				// ],
				equipmentList: [
				 
				],
				activeFilter: null,
				selectedFilters: {
				  project: '全部项目',
				  contract: '全部合同',
				  category: '全部类别',
				  status: '全部'
				},
				tempFile:[],	
				maxNum:5,
				imgFile:[],
				imgList:[], 
				contractName:'',
				pageNum:1,
				total:0
			}
		},
		watch:{
			'imgFile.length':function(newLength, oldLength){
				console.log(newLength, oldLength);
				this.maxNum =5- newLength
			}
			
		},
		onLoad(option) {
			if(option.isCheer){
				this.isCheer = option.isCheer
			}
			console.log(this.storeStatus);
			console.log(option);
			if(option.option=='出场'){
				this.result.push({
					label:'未领用',
					value:2,
					name:'storeStatus'
				})
				this.storeStatus.label="未领用"
				this.storeStatus.value=2
				this.dataList.status = 2
				console.log(this.dataList);
			}
			console.log(this.storeStatus);
		    this.getProjectData()
		},
		async onPullDownRefresh() {
			console.log(111);
			this.pageNum = 1
			this.equipmentList = []
		    await this.getSbmanageLists({...this.dataList,pageSize:20,pageNum:this.pageNum})
		    uni.stopPullDownRefresh()
		},
		methods:{
			
			async refresherrefresh(){
				this.refresh = true
				this.pageNum = 1
					this.equipmentList = []
				    await this.getSbmanageLists({...this.dataList,pageSize:20,pageNum:this.pageNum})
				    this.refresh = false
			},
			scrolltolower(){
				if(this.equipmentList.length>=this.total) return
				// console.log('111111 ');
				this.pageNum++
				this.getSbmanageLists({...this.dataList,pageSize:20,pageNum:this.pageNum})
			},
			redirect(item){
				console.log(item);
				uni.navigateTo({
					url:`/pages/equipment/add/index?projectId=${item.projectId}&contractId=${item.drawContractId}&sourceId=${item.id}&recordId=${item.drawId}&unit=${item.unit}`
				})
			},
			//删除附件
			deletePic(index) {
				// console.log(event.name,this.fileList,this[`fileList${event.name}`]);
			    this.imgFile.splice(index, 1)
				this.imgList.splice(index, 1)
			},
			sendback(e){
					console.log(e);
				facilitydrawth(e.drawId).then(res=>{
					console.log(res);
					this.getSbmanageLists(this.dataList)
				})
			},
			goToDetail(item) {
				if(this.isCheer){
					uni.navigateTo({
						url:`/pages/equipment/refuel/index?facilityId=${item.id}&projectId=${item.projectId}&oilContractName=${item.oilContractName}&drawContractId=${item.drawContractId}&cycleId=${item.cycleId}&name=${item.name}&code=${item.code}`
					})
				}else{
					uni.navigateTo({
					  url: '/pages/equipment/detail/index?id=' + item.id
					});
				}
			  
			},
			handleOutClick(e){
				// this.$refs.popup.open()
				// this.showOutPicker=true
			},
			refuel(data){
				console.log(data);
				{facilityId:20108}
				uni.navigateTo({
					url:`/pages/equipment/refuel/index?facilityId=${data.id}&projectId=${data.projectId}&oilContractName=${data.oilContractName}&drawContractId=${data.drawContractId}&cycleId=${data.cycleId}&name=${data.name}&code=${data.code}`
				})
			},
			refuelfacilitydraw(data){
				uni.navigateTo({
					url:`/pages/equipment/receive/index?facilityId=${data.id}`
				})
			},
			receiveUlit(){
				this.isShow=true
				
			},
			confirm(){
				if(!this.contractName){
					uni.showToast({
					  title: '请选择领用单位',
					  icon: 'none'
					});
					return
				}
				console.log(this.imgList.join(','));
				facilitydraw({...this.parms,attachmentUrl:this.imgList.join(',')}).then(res=>{
					if(res.code==200){
						uni.showToast({
						  title: '成功',
						  icon: 'none'
						});
						this.getSbmanageLists(this.dataList)
					}
					 
				})
				console.log(this.dataList);
				
				this.cancel()
			},
			cancel(){
				this.show = false
				this.tempFile = [],
				this.maxNum = 5,
				this.imgFile = [],
				this.imgList = [],
				this.contractName=''
				this.unit = ''
			},
			// 选择图片
			chooseImage(){
				const that = this
				uni.chooseImage({
					count: this.maxNum, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					success: async (res)=> {
						console.log(res.tempFilePaths);
						that.tempFile=[...res.tempFilePaths]
						console.log(that.tempFile);
						// that.maxNum = 5-that.tempFile.length
						const token = uni.getStorageSync("token");
						// that.imgFile=[]
						that.tempFile.forEach(item=>{
							
							if(item.split(':')[0]!='file'){
								let p = plus.io.convertLocalFileSystemURL(item); 
								that.imgFile.push('file://'+  p)
								 uni.uploadFile({
								     url: `${BASEURL}/common/upload`, 
								      filePath:  'file://'+  p,
								 	  header: {
								 	   'Authorization': token,
								 	  },
								      name: 'file',
								      success: (uploadFileRes) => {
								          console.log(JSON.parse(uploadFileRes.data).annexUrl);
								 		  this.imgList.push(JSON.parse(uploadFileRes.data).annexUrl)
								         // 获取上传服务器的地址 
								      }
								  });
							}else{
								that.imgFile.push(item)
								  uni.uploadFile({
								      url: `${BASEURL}/common/upload`, 
								       filePath:  item,
									   header: {
									    'Authorization': token,
									   },
								       name: 'file',
								       success: (uploadFileRes) => {
								           console.log(uploadFileRes.data.annexUrl);
										   this.imgList.push(JSON.parse(uploadFileRes.data).annexUrl)
								          // 获取上传服务器的地址
								       }
								   });
							}
						
						})
						console.log(that.imgFile);
						
					}
				});
			},
			async uploadFilePromise(url) {
				const token = uni.getStorageSync("token");
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: `${BASEURL}/common/upload`,// 仅为示例，非真实的接口地址
						header: {
			             'Authorization': token,
			            },
						filePath: url,
						name: 'file',
						success: (res) => {
							console.log(res);
							
							resolve(JSON.parse(res.data).annexUrl)
						},
						
					});
				})
			},
			outClick(e){
				this.show=true
				console.log(e);
				this.facilityId=e.id
				this.contractId = e.contractId
				queryByParam({projectId:e.projectId}).then(res=>{
					this.unitList=res.data
					// this.isShow = true
					console.log(res);
				})
			},
			getSbmanageLists(data){
				// 显示加载提示
				this.isempty = false
				uni.showLoading({
					title: "加载中",
					mask: true
				});
				getSbmanageList(data).then(res=>{
					// 隐藏加载提示
					uni.hideLoading();
					console.log(res);
					if(res.code==200){
						this.total = res.total
						this.equipmentList = [...this.equipmentList,...res.rows]
						if(this.equipmentList.length==0){
							this.isempty = true
							console.log(this.isempty);
						}else{
							this.isempty = false
						}
					}
				})
			},
			//获取项目列表
			getProjectData() {
			    getProjectList().then(res => {
			        if (res && res.code == 200) {
			            const data = res.rows.map(item => ({
			                label: item.projectName || item.name,
			                value: item.id
			            }));
						this.projectOrder.child=data
						this.projectOrder.label=data[0].label
						this.projectOrder.value=data[0].value
						this.result.push({
							label:data[0].label,
							value:data[0].value,
							name:'projectOrder'
						})
						// this.projectValue = 
						//     this.projectOptions[0].value
						// this.projectLabel = this.projectOptions[0].label
						// this.getsupplierData({projectId:this.projectValue})
						this.projectId=data[0].value
						this.queryByParamList({projectId:data[0].value,parentId:0})
						
			        }
			    })
			},
			// //供应商
			// getsupplierData(data) {parebt
			//     getsupplier(data).then(res => {
			//         this.supplierList = res.rows.map(item => ({
			//             label: item.name,
			//             value: item.id
			//         }));
			// 		this.cooperationValue = res.rows[0].id
			        
			//     })
			// },
			// 设备类别
			getCountByGenreIdLists(data){
				getqueryByParam(data).then(res=>{
					console.log(res,'设备类别');
					if(res.code==200){
						const dataArr =res.data.map(item=>({
							value:item.id,
							label:item.name
						}))
						// this.categoryValue = res.data[0].id
						this.categoryOrder.child=dataArr
						// this.categoryOrder.value=dataArr[0].value
						// this.categoryOrder.label=dataArr[0].label
						// this.result.push({
						// 	label:dataArr[0].label,
						// 	value:dataArr[0].value,
						// 	name:'categoryOrder'
						// })
						this.categoryOrder.child.unshift({label:'全选',value:null})
						const data = {
							// materialGenreId:this.categoryOrder.value,
							contractId:this.supplierOrder.value,
							projectId:this.projectOrder.value,
							// status:this.storeStatus.value
						}
						this.dataList={...data,...this.dataList}
						const objstatus = {}
						if(this.isCheer){
							// 判断是否从列表的加油进入
							objstatus.status = 1
						}
						this.getSbmanageLists({...this.dataList,pageSize:20,pageNum:this.pageNum,...objstatus})
					}
				})
			},
			// 合同
			queryByParamList(e){
				queryByParam(e).then(res=>{
					const data = res.data.map(item => ({
					    label: item.contractName,
					    value: item.id
					}));
					console.log(data);
					this.result.push({
						label:data[0]?data[0].label:'',
						value:data[0]?data[0].value:'',
						name:'supplierOrder'
					})
					this.supplierOrder.child=data
					this.supplierOrder.value=data[0].value
					this.supplierOrder.label=data[0].label
					this.dataList.contractId = data[0].value
					// this.cooperationValue = res.data[0].id
					this.getCountByGenreIdLists({projectId:this.projectId})
				})
			},
			closeOutPicker(e) {
			
			  this.isShow = false;
			},
			confirmOut(){
				// facilitydraw(this.parms).then(res=>{
				// 	if(res.code==200){
				// 		uni.showToast({
				// 		  title: '成功',
				// 		  icon: 'none'
				// 		});
				// 		this.getSbmanageLists(this.arrParms)
				// 	}
				// })
				this.isShow = false;
				console.log(this.parms,this.arrParms);
			},
			selectOutOption(data) {
				console.log(data);
				this.unit = data.id
				this.contractName = data.contractName
					
				const obj = {
					facilityId:this.facilityId,
					projectId:data.projectId,
					contractId:data.id
				}
				this.parms=obj
				

			    
			  // console.log(value,text);
			},
			toggleFilter(filter) {
			  this.activeFilter = this.activeFilter === filter ? null : filter;
			},
			closeFilter() {
			  this.activeFilter = null;
			},
			change(e) {
				console.log('弹窗打开状态：',e);
			},
			/**
			 * 点击每个筛选项回调
			 * @param {Object} e { name, active, type } = e
			 */
			selectMenu(e) {
				const { name, active, type } = e;
				this.activeName = name;
				// type 等于1 的需要特殊处理：type不等于1可以忽略
				if (type == 1) {
					this.clickItem({
						name: 'vip_type',
						label: 'VIP文档',
						value: e.active ? 1 : 0
					});
				} else {
					const find = this.result.find(item => item.name == this.activeName);
					if (find) {
						const findIndex = this[this.activeName].child.findIndex(item => item.label == find.label && item.value == find.value);
						this[this.activeName].activeIndex = findIndex;
					} else {
						// this[this.activeName].activeIndex = 0;
					}
				}
			},
			/**
			 * 点击菜单回调处理
			 * @param {Object} item 选中项 { label,value } = e
			 */
			clickItem(e) {
				// 下面有重新赋值，所以用let
				let { label, value } = e;
				const findIndex = this.result.findIndex(item => item.name == this.activeName);
				if (this.defaultValue.indexOf(value) > -1 && this[this.activeName].label) {
					label = this[this.activeName].label;
				}
				// 已经存在筛选项
				if (findIndex > -1) {
					this.$set(this.result, findIndex, {
						name: this.activeName,
						label,
						value
					})
				} else {
					this.result.push({
						name: this.activeName,
						label,
						value
					});
				}
				this.result = this.result.filter(item => this.defaultValue.indexOf(item.value) == -1);
				console.log(this.result);
				const data = {
					materialGenreId:'',
					contractId:'',
					projectId:'',
					status:''
				}
				const arr = [...this.result]
				console.log(arr);
				arr.forEach(item=>{
					const obj = {...item}
					console.log(obj);
					if(obj.name=='categoryOrder'){
						data.materialGenreId=obj.value
						this.getSbmanageLists({...this.dataList,pageNum:this.pageNum,pageSize:20,materialGenreId:obj.value})
					}
					if(obj.name=='supplierOrder'){
						data.contractId=obj.value
					}
					if(obj.name=='projectOrder'){
						data.projectId=obj.value
						this.queryByParamList({projectId:value,parentId:0})
					}
					if(obj.name=='storeStatus'){
						data.status=obj.value
					}
				})
				this.dataList=data
				this.pageNum=1
				this.equipmentList = []
				// this.getSbmanageLists({...this.dataList,pageNum:this.pageNum,pageSize:20})
			}
		}
	}
</script>

<style lang="scss" scoped>
	
*{
	box-sizing: border-box;
}
::v-deep.uv-text__value.uv-line-1{
	 max-width: 90rpx !important;
	 }
:deep(.uv-dp__container) {
    max-height: 40vh !important;   /* 使用视口单位更可靠 */
    overflow-y: auto !important;
    color: #F53F3F !important;
    scrollbar-width: thin;         /* 添加滚动条样式 */
    // scrollbar-color: #F53F3F #f5f5f5; /* 滚动条颜色 */
}
.popup{
	height: 80rpx;
	display: flex;
	justify-content: space-around;
	align-items: center;
	.item{
		width: 188rpx;
		display: flex;
		.popup-text{
			width-max: 128rpx;
			
			overflow: hidden;
		}
	}
}

.list{
	
	// min-height: 800rpx;
	max-height: calc(100vh - 260rpx);
	background-color: #f6f7f9;
	.blank-box{
		height: 20rpx;
		background-color: #f6f7f9;
	}
	.equipment-item{
		position: relative;
		// width: 700rpx;
		margin: 0 auto;
		margin-bottom: 20rpx;
		padding: 24rpx 25rpx;
		background-color: #fff;
		// border-radius: 32rpx;
		.status-tag{
			// position: absolute;
			// right: 0;
			// top: 0;
			margin-right: 20rpx;
			width: 100rpx;
			height: 40rpx;
			text-align: center;
			line-height: 40rpx;
			font-size: 24rpx;
			color: #fff;
			background-color: #fc913e;
			// border-radius: 40rpx;
			border-top-right-radius: 8rpx;
			border-bottom-left-radius: 8rpx;
		}
		.in{
			background-color: #18cc3a;
			// color: #00B42A;
		}
		.item-header{
			display: flex;
			justify-content: space-between;
			align-items: center;
			.left-section{
				display: flex;
				align-items: center;
				flex: 1;
			}
			.equipment-title{
				margin-right: 10rpx;
				font-size: 30rpx;
				font-weight: bold;
				overflow: hidden;
				 text-overflow: ellipsis;
				 white-space: nowrap;
			}
			.equipment-id{
				width: 220rpx;
				font-size: 30rpx;
				 overflow: hidden;
				  text-overflow: ellipsis;
				  white-space: nowrap;
			}
			// .status-tag{
			// 	width: 100rpx;
			// 	height: 40rpx;
			// 	text-align: center;
			// 	line-height: 40rpx;
			// 	font-size: 28rpx;
			// 	color: #F53F3F;
			// 	background-color: #FFECE8;
			// 	border-radius: 40rpx;
			// }
			.in{
				background-color: #E8FFEA;
				color: #00B42A;
			}
			
		}
		.equipment-image{
			width: 440rpx;
			margin: 28rpx 104rpx;
		}
		.info-section{
			.info-row{
				display: flex;
				align-items: center;
			}
			.circle-icon{
				width: 32rpx;
				margin-left: 40rpx;
			}
			.info-text{
				// flex: 1;
				width: 150rpx;
				font-size: 30rpx;
				font-weight: normal;
				color: #72767C;
				text-align: right;
				// margin-left: 8rpx;
			}
			.info-content{
				font-size: 30rpx;
			}
		}
	}
	.action-buttons{
		margin-top: 30rpx;
		display: flex;
		justify-content: right;
		.action-btn{
			width: 124rpx;
			height: 72rpx;
			font-size: 30rpx;
			text-align: center;
			line-height: 72rpx;
			border-radius: 72rpx;
			color: #39C75A;
			background-color: #E8FFEA;
		}
		.fuel-btn{
			margin-right: 20rpx;
			// width: 184rpx;
			color: #165DFF;
			background-color: #E8F3FF;
		}
		.draw{
			width: 170rpx;
		}
		.metering{
			margin-right: 20rpx;
		}
		.in-btn{
			background-color: #FFECE8;
			color: #F53F3F;
		}
	}
}
/* 修改底部弹出层部分 */
	.picker-container {
	  position: fixed;
	  left: 0;
	  right: 0;
	  bottom: 0;
	  top: 0;
	  z-index: 11000;
	}
	
	.picker-mask {
	  position: absolute;
	  top: 0;
	  left: 0;
	  right: 0;
	  bottom: 0;
	  background-color: rgba(0, 0, 0, 0.4);
	}
	
	.picker-content {
	  position: absolute;
	  left: 0;
	  right: 0;
	  bottom: 0;
	  height: 500rpx;
	  background-color: #FFFFFF;
	  border-top-left-radius: 16px;
	  border-top-right-radius: 16px;
	}
	
	.picker-header {
	  display: flex;
	  height: 53px;
	  flex-direction: row;
	  justify-content: space-between;
	  align-items: center;
	  padding: 0 16px;
	  border-bottom-width: 1px;
	  border-bottom-color: #EEF2F9;
	  margin-bottom: 30rpx;
	}
	
	.picker-title {
	  font-size: 16px;
	  color: #1D2129;
	  font-weight: 400;
	}
	
	.picker-cancel, .picker-confirm {
	  font-size: 16px;
	}
	
	.picker-cancel {
	  color: #86909C;
	}
	
	.picker-confirm {
	  color: #165DFF;
	}
	
	.picker-list {
	  padding: 24rpx 0;
	  max-height: 350rpx;
	  /* overflow: scroll; */
	}
	
	.picker-item {
		display: flex;
	  height: 44px;
	  flex-direction: row;
	  justify-content: center;
	  align-items: center;
	  padding: 0 16px;
	  overflow: hidden;
	  white-space: nowrap;
	  text-overflow: ellipsis;
	}
	.selected{
		background-color: #E8F3FF;
	}
	.black-box{
		height: 50rpx;
	}
	.picker-item text {
	  font-size: 16px;
	  color: #1D2129;
	}
	.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
		
		.rect {
			width: 600rpx;
			height: 400rpx;
			padding: 40rpx 10rpx;
			background-color: #fff;
			border-radius: 30rpx;
			.rect_but{
				margin-top: 30rpx;
				display: flex;
				justify-content: space-around;
			}
			.but{
				width: 144rpx;
				height: 72rpx;
				line-height: 72rpx;
				text-align: center;
				border-radius: 6rpx;
				background-color: #E8F3FF;
			}
			.rect-box{
				display: flex;
				
				.box-content{
					flex: 1;
					margin-left: 20rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					color: #808080;
				}
				.select-text{
					color: #000000;
				}
			}
			.img-box{
				.img-list{
					display: flex;
					.imgfile-box{
						display: flex;
						
					}
				}
				.imgfile{
					height: 100rpx;
					width: 100rpx;
					margin-right: 8rpx;
				}
				.wrap__preview{
					position: relative;
				}
				.deletable{
					position: absolute;
					top: 0;
					right: 0;
					width: 28rpx;
					height: 28rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					border-bottom-left-radius: 100px;
					background-color: #373737;
				}
				.plus-icon{
					width: 100rpx;
					height: 100rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					border: 1rpx solid #E6EAF3;
					border-radius: 10rpx;
				}
			}
		}
	}
</style>
